<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天室</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
        }

        .warp {
            width: 100%;
            background: rgb(186, 186, 243);
            margin: 0 auto;
            padding: 20px 0;
            text-align: center;
            /* position: relative; */
        }

        #title {
            padding: 20px 0;
        }

        #list {
            /* width: 100%; */
            padding: 0 5px;
            /* border: 1px solid black; */
        }

        li {
            max-width: 80%;
            padding: 10px;
            margin: 10px 0;
            list-style: none;
            background: rgb(203, 203, 243);
            border-radius: 5px;
            display: flex;
            align-items: center;
        }

        #txt {
            width: 60%;
            height: 50px;
            border: 0;
            padding: 0 5px;
        }

        button {
            height: 52px;
            border-radius: 5px;
            background: rgb(236, 241, 153);
            padding: 0 10px;
            border: 1px solid #fff;
        }

        .listWarp {
            display: flex;
            justify-content: space-between;
            position: absolute;
        }
        #infos{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: blanchedalmond;
            margin-right: 10px;
            text-align: center;
            display: flex;
            align-items: center;
            font-size: 10px;
            justify-content: center;
        }
        .user{
            color: blue;
            margin: 10px;
        }
    </style>
</head>

<body onload="sendName()">
    <div class="warp">
        <h1 id="title">欢迎来到聊天室</h1>
        <input type="text" placeholder="请留言！" value="" id="txt">
        <button onclick="submit()" id="btn">发送</button>
        <div class="listWarp">
            <ul id="list"></ul>
            <ul id="my_list"></ul>
        </div>
    </div>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
    var socket = io.connect('/');

    function sendName(){
        let name = prompt("请输入昵称！");
        if(name != "") {
            console.log(name,'bbbbbbbbb')
            socket.emit("join",name);
        }
        return
    }
    function submit() {
        let input = document.getElementById('txt');
        console.log(name,'ppppppppppppp')
        socket.send(input.value);
        // console.log(input.value);
        input.value = '';
    }

    socket.on('message', function (msg) {
        /* let li = document.createElement("li"); */
        // let infos = document.createElement("span");
        if (msg) {
            if (msg == "全员禁言") {
                document.getElementById("btn").disabled = true;
                // document.getElementById("txt").disabled = true;
                document.getElementById("btn").style.background = "red";
                let count = 10;
                setInterval((() => {
                    count--;
                    if(count < 0) return
                    // document.getElementById("infos").innerHTML = `已禁言，${count}秒后解锁禁言`;
                    li.innerHTML = `已禁言，${count}秒后解锁禁言`;
                    document.getElementById("btn").disabled = false;
                    document.getElementById("btn").style.background = "#ecf199";
                }), 1000)
            }
            if (msg == "超级管理员") {
                document.getElementById("btn").disabled = false;
                document.getElementById("btn").style.background = "#ecf199";
            }
            let li = document.createElement("li");
            li.innerHTML = msg;
            /* li.innerHTML = ('<span id="infos"></span>' + msg); */
            document.body.appendChild(li);
        }

    })

    socket.on("join",function(name){
        console.log(name,"加入聊天室！")
        let p = document.createElement("p");
        p.className = "user";
        p.innerHTML = (name + "加入聊天室！");
        document.body.appendChild(p);
    })

    document.onkeydown = (e) => {
        if (e.keyCode == 13) {
            submit()
        }
    }

    window.onbeforeunload = function (e) {
        socket.send()
    }

</script>

</html>